/* eslint-disable react-hooks/exhaustive-deps */
import React,{ Fragment,useState ,useEffect,useRef} from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import './index.less'

import MyUpload from '../../../components/Upload/Upload'




import { Tree,Button, Form, Input,Tag ,Switch} from 'antd';

import utils from '../../../util/utils'
import http from '../../../util/http'

const {TextArea} = Input

function MyVideo() {
  const navigate = useNavigate ();
  const location = useLocation();
  console.log(location)

  const [treeData,setTreeData] = useState([
    // {
    //   title: 'parent 1',
    //   key: '0-0',
    //   children: [
    //     {
    //       title: '章节1',
    //       key: '1',
    //       children: [
    //         {
    //           title: '章节1-课时1',
    //           key: '1-1',
    //         },
    //         {
    //           title: '章节1-课时2',
    //           key: '1-2',
    //         },
    //       ],
    //     },
    //     {
    //       title: '章节2',
    //       key: '2',
    //       children: [
    //         {
    //           title: '章节2-课时1',
    //           key: '2-1',
    //         },
    //         {
    //           title: '章节2-课时2',
    //           key: '2-2',
    //         },
    //       ],
    //     },
    //   ],
    // },
  ]);

  const [step,setStep] = useState(treeData.length === 0 ? 1 : -1);
  const changeStep = (value)=>{
    setStep(()=>value)
  }

  const [categoryList,setCategoryList] = useState([
    {
      Id:"1",
      CategoryName:"类别1"
    },
    {
      Id:"2",
      CategoryName:"类别2"
    },
    {
      Id:"3",
      CategoryName:"类别3"
    }
  ],);

  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };
  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };


   const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Fragment >
      <div className="MyVideo">
        <div className="MyVideo-wrap">
          <div className="left-box">
              <Tree
                checkable
                defaultExpandAll={true}

                onSelect={onSelect}
                onCheck={onCheck}
                treeData={treeData}
              />

              <div className="add-btns">
              {
                // (step === 2 || step===3) && (
                  <>
                    <Button type="primary" onClick={(e)=>changeStep(2)}>新增章节</Button>
                    <Button type="primary" onClick={(e)=>changeStep(3)}>新增课时</Button>
                  </>
                // )
              }
              </div>

          </div>
          <div className="right-box">
              {
               step === 1 && (
                <div className="step1-wrap">
                  <Form
                    name="basic"
                    initialValues={{
                      remember: true,
                    }}
                    labelCol={{
                      span: 3,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                  >
                    <Form.Item
                      label="课程名"
                      name="Title"
                      rules={[
                        {
                          required: true,
                          message: '请输入课程名!',
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="课程封面"
                      name="ImgUrl"
                      rules={[
                        {
                          required: true,
                          message: '请上传课程封面！',
                        },
                      ]}
                    >
                      <MyUpload/>
                    </Form.Item>
                    
                    <Form.Item
                      label="类别"
                      name="Category"
                      rules={[
                        {
                          required: true,
                          message: '请选择课程类别，最多3个!',
                        },
                      ]}
                    >
                      <div style={{height:"32px",lineHeight:"32px",marginBottom:"6px"}}>
                        <span style={{color:"#f50"}}>您还未选择类别</span>
                      </div>
                      {
                        categoryList && categoryList.map((item,index)=>(
                          <Tag color="orange" key={index}>{item.CategoryName}</Tag>
                        ))
                      }
                    </Form.Item>

                    <Form.Item
                      label="课程简介"
                      name="Description"
                      rules={[
                        {
                          required: true,
                          message: '请输入课程简介!',
                        },
                      ]}
                    >
                      <TextArea rows={4} />
                    </Form.Item>
                    
                    <Form.Item
                      label="是否完结"
                      name="isEnd"
                    >
                      <Switch defaultChecked/>
                    </Form.Item>

                    <Form.Item
                      label="是否发布"
                      name="IsRelease"
                    >
                      <Switch defaultChecked/>
                    </Form.Item>

                    <Form.Item
                      label="章节数"
                      name="ChapterCount"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="课时数"
                      name="ClassHourCount"
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      wrapperCol={{
                        offset: 3,
                        // span: 3,
                      }}
                    >
                      <Button type="primary" htmlType="submit">
                        创建课程
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              )}

              {
               step === 2 && (
                <div className="step2-wrap">
                  <Form
                    name="basic"
                    initialValues={{
                      remember: true,
                    }}
                    labelCol={{
                      span: 3,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                  >
                    <Form.Item
                      label="章节名"
                      name="Title"
                      rules={[
                        {
                          required: true,
                          message: '请输入章节名!',
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                    
                    <Form.Item
                      label="序号"
                      name="Sort"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      wrapperCol={{
                        offset: 3,
                        // span: 3,
                      }}
                    >
                      <Button type="primary" htmlType="submit">
                        创建章节
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              )}

              {
               step === 3 && (
                <div className="step3-wrap">
                  <Form
                    name="basic"
                    initialValues={{
                      remember: true,
                    }}
                    labelCol={{
                      span: 3,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                  >
                    <Form.Item
                      label="课程名"
                      name="Title"
                      rules={[
                        {
                          required: true,
                          message: '请输入课时名!',
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="课时视频"
                      name="VideoUrl"
                      rules={[
                        {
                          required: true,
                          message: '请上传课时视频！',
                        },
                      ]}
                    >
                      <MyUpload type="video"/>
                    </Form.Item>
                    
                      
                    <Form.Item
                      label="时长"
                      name="Time"
                    >
                      <Input />
                    </Form.Item>
                    
                    <Form.Item
                      label="序号"
                      name="Sort"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      wrapperCol={{
                        offset: 3,
                        // span: 3,
                      }}
                    >
                      <Button type="primary" htmlType="submit">
                        创建课时
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              )}
          </div>
        </div>
      </div>
    </Fragment>

  )
}

export default MyVideo;